<template>
  <div class="content">
    <dc-header :icon="'icon-header-back'" :title="title"></dc-header>    
    <div class="head-top content-body">
      <div v-for="item in DetailList" :key="item.id" @click="gotodetail(item)">
        <mt-cell :is-link="!!item.id" class="mt20">
          <dc-row slot="title">
            <dc-col span="4" style="position: initial">
              <div v-if="item.accountFlag === 2" class="titleSpinner backgroundColorIn"></div>
              <div v-if="item.accountFlag === 1" class="titleSpinner backgroundColorOut"></div>
            </dc-col>
            <dc-col span="20">
              <div class="mint-cell-text">{{item.accountName}}
                <span v-show="item.accountType === 2"
                      class="iconBG"
                      v-bind:class="{'isTanxiao': item.accountType === 2}"
                >摊销</span>
                <span v-show="item.accountType === 3"
                      class="iconBG"
                      v-bind:class="{'isGuding': item.accountType === 3}"
                >固定</span>
              </div>
              <div class="mint-cell-label">{{item.date}}</div>
            </dc-col>
          </dc-row>
          <span class="lineHeight">{{item.accountNum}}</span>
        </mt-cell>
      </div>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import {col, row} from '@/common/Flex';
  import api from '../../../common/api/account';

  export default {
    data () {
      return {
        DetailList: [],
        title: ''
      };
    },
    methods: {
      getInfoList: function () {
        let data = JSON.parse(this.$route.params.data);
        let that = this;
        this.title = data.accountName || '列表';
        api.getDetailList({
          'accountCode': data.accountCode,
          'beginTime': data.beginTime,
          'endTime': data.endTime
        }).then(function (res) {
          that.DetailList = res;
        });
      },
      gotodetail: function (data) {
        let beginTime = JSON.parse(this.$route.params.data).beginTime;
        if (data.id) {
          this.$router.push({name: 'modifyAccounts', params: {id: data.id, 'beginTime': beginTime}});
        }
      }
    },
    created () {
      this.getInfoList();
    },
    activated () {
      this.getInfoList();
    },
    components: {
      'dc-header': header,
      'dc-col': col,
      'dc-row': row
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/variable";

  .lineHeight {
    line-height: px2rem(140px);
    font-size: px2rem(30px);
  }
  .titleSpinner {
    width: px2rem(18px);
    height: px2rem(18px);
    border-radius: px2rem(18px);
    margin: auto;
    position: absolute;
    top: 50%;
    left: 5%;
    margin-top: px2rem(-9px);
  }
  .backgroundColorIn {
    background: #fdc741;
  }
  .backgroundColorOut {
    background: #33c68c;
  }
  .mint-cell-text {
    font-size: px2rem(34px);
    vertical-align: middle;
  }
  .iconBG {
    color: #fff;
    padding: px2rem(4px) px2rem(10px);
    font-size: px2rem(18px);
    border-radius: px2rem(10px);
    vertical-align: px2rem(4px);
  }
  .isTanxiao{
    background: #f5765d;
  }
  .isGuding {
    background: #FCC742;
  }
</style>
